/** IT资产统计部件 
 * Author:      yangjq 
 * CreateTime:  2023/8/12 15:39:48 
 * LastEditor:  yangjq 
 * ModifyTime:  2023/12/5 20:29:29 
 * Description: 
*/ 
<template>
  <div ref="echartRef" :style="{width:props.width , height:props.height}" ></div>
</template>
<script setup lang="ts">
import { ref  , Ref , reactive , watchEffect} from 'vue';
import { useECharts } from '/@/hooks/web/useECharts';

const props = defineProps(['width' , 'height']);

const echartRef = ref<HTMLDivElement | null>(null);

const { setOptions, echarts, chartInstance:getInstance} = useECharts(echartRef as Ref<HTMLDivElement>,'dark');

const option = reactive({
  title:{
    text:"资产统计",
    textVerticalAlign:'top',
    left:'center',
    top: 14,
    textStyle:{
      color:'#fff',
      textBorderWidth:'1',
      width:'100%',
      fontWeight:'400'
    }
  },
  tooltip: {
    trigger: 'axis'
  },
  backgroundColor:'rgba(128, 128, 128, 0.1)', //rgba设置透明度0.1
  animationEasing: 'elasticOut',
  animationDelayUpdate: function (idx) {
    return idx * 10;
  },
  grid:{
    containLabel:true,
    left:'30px',
    top:'42px',
    right:"30px",
    bottom:'40px',
  },
  legend: {
    bottom:'10px',
  },
  xAxis: {
    type: 'category',
    data: [ '计算机资源','刀片服务器', '网络交换机', '存储资源','机柜','安全设备','其他外设'],
    splitLine:{show: false},
    splitArea:{
      show: false,
    }
  },
  yAxis: {
    type: 'value',
    splitLine:{show: false},
  },
  series: [
    {
      type: 'bar',
      data: [23, 24, 18, 25, 18,20,45],
      name: '全部',
      barGap: '20%',
      barCategoryGap: '40%',
      emphasis: {
        focus: 'series',
        blurScope: 'coordinateSystem'
      },
      itemStyle: {
        opacity: 0.8
      },
      animationDurationUpdate: 1000, // 更新动画时长为 1s
      animationEasingUpdate: 'quinticInOut', // 更新动画缓动效果为 'quinticInOut'
      animationDelay: function (idx) {
        return idx * 10 + 100;
      }
    },
    {
      type: 'bar',
      name: '在用',
      data: [18, 20, 10, 15, 12,7,30],
      emphasis: {
        focus: 'series',
        blurScope: 'coordinateSystem'
      },
      itemStyle: {
        opacity: 0.8
      },
      animationDurationUpdate: 1000, // 更新动画时长为 1s
      animationEasingUpdate: 'quinticInOut', // 更新动画缓动效果为 'quinticInOut'
      animationDelay: function (idx) {
        return idx * 10 + 100;
      }
    },
    {
      type: 'bar',
      name: '维修',
      data: [2, 3, 2, 3, 4,2,1,1],
      emphasis: {
        focus: 'series',
        blurScope: 'coordinateSystem'
      },
      itemStyle: {
        opacity: 0.8
      },
      animationDurationUpdate: 1000, // 更新动画时长为 1s
      animationEasingUpdate: 'quinticInOut', // 更新动画缓动效果为 'quinticInOut'
      animationDelay: function (idx) {
        return idx * 10 + 100;
      }
    },
    {
      type: 'bar',
      name: '停用',
      data: [0, 0, 1, 2, 1,2,3],
      emphasis: {
        focus: 'series',
        blurScope: 'coordinateSystem'
      },
      itemStyle: {
        opacity: 0.8
      },
      animationDurationUpdate: 1000, // 更新动画时长为 1s
      animationEasingUpdate: 'quinticInOut', // 更新动画缓动效果为 'quinticInOut'
      animationDelay: function (idx) {
        return idx * 10 + 100;
      }
    },
    {
      type: 'bar',
      name: '闲置',
      data: [0, 0, 1, 1, 1,3,4],
      emphasis: {
        focus: 'series',
        blurScope: 'coordinateSystem'
      },
      itemStyle: {
        opacity: 0.8
      },
      animationDurationUpdate: 1000, // 更新动画时长为 1s
      animationEasingUpdate: 'quinticInOut', // 更新动画缓动效果为 'quinticInOut'
      animationDelay: function (idx) {
        return idx * 10 + 100;
      }
    },
    {
      type: 'bar',
      name: '不可用',
      data: [1, 1, 2, 2, 1,0,2,1],
      emphasis: {
        focus: 'series',
        blurScope: 'coordinateSystem'
      },
      itemStyle: {
        opacity: 0.8
      },
      animationDurationUpdate: 1000, // 更新动画时长为 1s
      animationEasingUpdate: 'quinticInOut', // 更新动画缓动效果为 'quinticInOut'
      animationDelay: function (idx) {
        return idx * 10 + 100;
      }
    }
  ]
});

function initCharts() {
  setOptions(option);
}
initCharts();
</script>
<style>
</style>
